<ion-header class="commonHeader" *ngIf="!formData" [ngStyle]="tagData?.data?.headerBoxCssStyle|styleFilter">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button appDebounceClick (debounceClick)="dismiss()">
        <img class="header-icon-img" src="assets/img/back_left.png" alt="back">
      </ion-button>
    </ion-buttons>
    <ion-title class="titleposition" [ngStyle]="tagData?.data?.headerTitleCssStyle|styleFilter">{{headerTitle}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div style="display: flex;align-items: center;" [ngStyle]="tagData?.data?.searchBoxCssStyle|styleFilter">
    <span class="city-name" [ngStyle]="tagData?.data?.cityNameCssStyle|styleFilter" appDebounceClick
      (debounceClick)="chooseCity(data.link.target)">{{areaPositionInfo.name}}
      <img class="city-icon" src="assets/fw/nav_icon_down_arrow@3x.png"
        [ngStyle]="tagData?.data?.downArrowIconCssStyle|styleFilter"></span>
    <ion-searchbar *ngIf="!formData" [ngStyle]="tagData?.data?.searchInputBoxCssStyle|styleFilter"
      placeholder="请输入关键字查询" type="text" autocomplete="on" (ionChange)="searchMap()" (ionClear)="touchClear($event)"
      [(ngModel)]="streetDetail" showCancelButton="always" cancelButtonText="取消">
    </ion-searchbar>
  </div>
  <div class="list_content" *ngIf="!flag" [ngStyle]="tagData?.data?.listContentBoxCssStyle|styleFilter">
    <ion-list>
      <ng-container *ngIf="searchList.data&&searchList.data.length>0; else elseEmptySearchListTemplate">
        <ion-item *ngFor="let item of searchList.data" detail="false" appDebounceClick
          (debounceClick)="closeModel(item);" [ngStyle]="tagData?.data?.listItemBoxCssStyle|styleFilter">
          <ion-label>
            <h3 class="label-h3-title" [ngStyle]="tagData?.data?.itemTitleCssStyle|styleFilter">{{item.title}}</h3>
            <p><span class="price label-p-span" [ngStyle]="tagData?.data?.itemAddressCssStyle|styleFilter">{{item.address }}</span></p>
          </ion-label>
        </ion-item>
      </ng-container>
      <ng-template #elseEmptySearchListTemplate>
        <ion-item detail="false" [ngStyle]="tagData?.data?.listItemBoxCssStyle|styleFilter">
          <ion-label>
            <h3 class="item-h3 emptyHintLabel" [ngStyle]="tagData?.data?.emptyDataHintCssStyle|styleFilter">{{emptyDataHint}}</h3>
          </ion-label>
        </ion-item>
      </ng-template>
    </ion-list>
  </div>
  <div *ngIf="flag">
    <div id="{{mapId}}" #addressMap style="width:100vw;" [ngStyle]="data.valueCssStyle | styleFilter" class="map"></div>
    <section *ngIf="!formData">
      <ion-list [ngStyle]="tagData?.data?.ionListCssStyle|styleFilter">
        <ng-container *ngIf="surroundingBusiness.data&&surroundingBusiness.data.length>0; else elseTemplate">
          <ion-item *ngFor="let item of surroundingBusiness.data;let i=index;" detail="false" appDebounceClick
            (debounceClick)="closeModel(item);" [ngStyle]="tagData?.data?.ionItemCssStyle|styleFilter">
            <p *ngIf="i==0" class="item-p"></p>
            <p *ngIf="i!=0" class="sec-item-p"></p>
            <ion-label>
              <h3 *ngIf="i==0" class="item-h3" [ngStyle]="tagData?.data?.titleCssStyle|styleFilter">{{item.title}}</h3>
              <h3 *ngIf="i!=0" class="sec-item-h3" [ngStyle]="tagData?.data?.title2CssStyle|styleFilter">{{item.title}}</h3>
              <p><span class="price label-p-span" [ngStyle]="tagData?.data?.addressCssStyle|styleFilter">{{item.address}}</span></p>
            </ion-label>
          </ion-item>
        </ng-container>
        <ng-template #elseTemplate>
          <ion-item detail="false" appDebounceClick (debounceClick)="closeModel(item);">
            <ion-label>
              <h3 class="item-h3 emptyHintLabel" [ngStyle]="tagData?.data?.emptyDataHintCssStyle|styleFilter">{{emptyDataHint}}</h3>
            </ion-label>
          </ion-item>
        </ng-template>




      </ion-list>
    </section>
  </div>
</ion-content>